<template>
  <div class="flex-grow-1 d-flex-col">
    <span>
      <button class="el-icon-back"
                 @click="home()"
                 role="text"
                 size="medium"></button>
    </span>
    <app-tab :active="activeName"
             class="flex-grow-1 d-flex-col">
      <app-tab-pane :label="$t('settings.me.tabTitle')"
                   name="first"
                   class="d-flex-col flex-grow-1">
        <me class="d-flex-col flex-grow-1"></me>
      </app-tab-pane>
      <app-tab-pane :label="$t('settings.basicSettings.tabTitle')"
                   name="second"
                   class="d-flex-col flex-grow-1">
        <basic-settings class="d-flex-col flex-grow-1"></basic-settings>
      </app-tab-pane>
      <app-tab-pane :label="$t('settings.about.tabTitle')"
                   name="fourth"
                   class="d-flex-col flex-grow-1">
        <about class="d-flex-col flex-grow-1"></about>
      </app-tab-pane>
    </app-tab>
  </div>
</template>
<script>
import Me from '@/components/settings/Me'
import BasicSettings from '@/components/settings/BasicSettings'
import About from '@/components/settings/About'
import AppTab from '@/components/common/tabs/AppTab'
import AppTabPane from '@/components/common/tabs/AppTabPane'
export default {
  data () { return { activeName: 'first' } },
  components: { Me, BasicSettings, About, AppTab, AppTabPane },
  methods: {
    home () {
      this.$router.push({ path: '/home' })
    }
  }
}
</script>
